8f:I[903690,["/chat-static/_next/static/chunks/207k4irufuy1q.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1xnpnq2yv_y5u.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2eciheds0i9z4.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1oslv0c4p1hes.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/0294hnotirvvk.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3egyb5cbfet-b.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3fbsfek8pd--1.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/0gl0monphc_1q.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/32nvcog1s7wsq.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3a-9evtevbng4.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3xuq22wvkumrj.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1848vponakflr.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/chunks/207k4irufuy1q.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1xnpnq2yv_y5u.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2eciheds0i9z4.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1oslv0c4p1hes.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/0294hnotirvvk.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3egyb5cbfet-b.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3fbsfek8pd--1.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/0gl0monphc_1q.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/32nvcog1s7wsq.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3a-9evtevbng4.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/3xuq22wvkumrj.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X","/chat-static/_next/static/chunks/1848vponakflr.js?dpl=dpl_B7usN7gtu23n1RfRrpKB7WQjrb9X"],"SWRDataProvider"] 91:T2f36,[V0_FILE]xml:file="public/one.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/one-rgbFbF5CoSXJEtPo35UtCr4mzEFlZn.svg" isMerged="true" [V0_FILE]xml:file="public/two.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/two-O5mjmYdw87ldNo7jYjjQJTvVURViFO.svg" isMerged="true" [V0_FILE]xml:file="public/three.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/three-ftzoGwzi3M7PHU1Ug0siGUTctd0hCW.svg" isMerged="true" [V0_FILE]xml:file="public/four.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/four-GQHPY0NARES08Mc8ulo2UeaatMJtgU.svg" isMerged="true" [V0_FILE]xml:file="public/five.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/five-Xux5rPbgJQlkTiRGdl1PfDPwwqTQYy.svg" isMerged="true" [V0_FILE]png:file="public/tabby-cat.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tabby-cat-JrIrhQj1POyJ4Cv6z8qYHoUlFpfmRT.png" isMerged="true" [V0_FILE]png:file="public/cat-hat.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cat-hat-v5PFqTn9hSwfxuwRKLm41Y7hvMbjb8.png" isMerged="true" [V0_FILE]png:file="public/cat-box.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cat-box-Tn3f9RhCLcSdzuJvpn0jYwCkG2fi9p.png" isMerged="true" [V0_FILE]png:file="public/cracker-cat.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cracker-cat-dK6lQNtPjxlHHTKAk3HZHZSN0XNc0Q.png" isMerged="true" [V0_FILE]png:file="public/galaxy-cat.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/galaxy-cat-BIGeojg5WNdPYBLeqJtVBbI5v4sE7F.png" isMerged="true" [V0_FILE]typescriptreact:file="components/options-selector.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" interface OptionData { id: number background: string icon: string main: string sub: string defaultColor: string } const OptionsSelector: React.FC = () => { const [activeOption, setActiveOption] = useState(0) const optionsData: OptionData[] = [ { id: 0, background: "/tabby-cat.png", icon: "fas fa-glasses", main: "cool cat", sub: "living the sunglasses life", defaultColor: "#ED5565", }, { id: 1, background: "/cat-hat.png", icon: "fas fa-sun", main: "poolside vibes", sub: "summer hat game strong", defaultColor: "#FC6E51", }, { id: 2, background: "/cat-box.png", icon: "fas fa-box", main: "box explorer", sub: "if i fits, i sits", defaultColor: "#FFCE54", }, { id: 3, background: "/cracker-cat.png", icon: "fas fa-cookie-bite", main: "snack time", sub: "nom nom nom", defaultColor: "#2ECC71", }, { id: 4, background: "/galaxy-cat.png", icon: "fas fa-star", main: "cosmic kitty", sub: "exploring the universe", defaultColor: "#5D9CEC", }, ] const handleOptionClick = (optionId: number) => { setActiveOption(optionId) } const styles = ` body { margin: 0; padding: 0; } .options-container { display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: hidden; height: 100vh; font-family: 'Roboto', sans-serif; transition: 0.25s; background: #f5f5f5; } .options-wrapper { display: flex; flex-direction: row; align-items: stretch; overflow: hidden; min-width: 600px; max-width: 900px; width: calc(100% - 100px); height: 400px; } .option-item { position: relative; overflow: hidden; min-width: 60px; margin: 10px; background-size: auto 120%; background-position: center; cursor: pointer; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); border-radius: 30px; flex-grow: 1; } .option-item.active { flex-grow: 10000; transform: scale(1); max-width: 600px; margin: 0px; border-radius: 40px; background-size: auto 100%; } .option-item.active .option-shadow { box-shadow: none; } .option-item:not(.active) .option-shadow { bottom: -40px; box-shadow: none; } .option-item.active .option-label { bottom: 20px; left: 20px; } .option-item:not(.active) .option-label { bottom: 10px; left: 10px; } .option-item.active .option-info > div { left: 0px; opacity: 1; } .option-item:not(.active) .option-info > div { left: 20px; opacity: 0; } .option-shadow { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 120px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .option-label { display: flex; position: absolute; right: 0px; height: 40px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .option-icon { display: flex; flex-direction: row; justify-content: center; align-items: center; min-width: 40px; max-width: 40px; height: 40px; border-radius: 100%; background-color: white; } .option-info { display: flex; flex-direction: column; justify-content: center; margin-left: 10px; color: white; white-space: pre; } .option-info > div { position: relative; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out; } .option-main { font-weight: bold; font-size: 1.2rem; } .option-sub { transition-delay: 0.1s; } .inactive-options { display: none; } /* Tablet and Mobile Responsive Styles */ @media screen and (max-width: 1024px) { .options-container { padding: 20px; height: auto; min-height: 100vh; flex-direction: column; } .options-wrapper { display: flex; flex-direction: column; min-width: auto; max-width: none; width: 100%; height: auto; align-items: center; } /* Active option takes full width and proper height */ .option-item.active { display: block; width: 100%; max-width: 500px; height: 300px; margin: 0 0 30px 0; border-radius: 25px; background-size: cover; flex-grow: 0; transform: none; } /* Ensure content is in bottom left */ .option-item.active .option-label { bottom: 25px; left: 25px; right: auto; height: 40px; } .option-item.active .option-info > div { left: 0px; opacity: 1; } /* Hide inactive options from normal flow and show as icons */ .option-item:not(.active) { display: none; } /* Show inactive options as circular icons */ .inactive-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; width: 100%; max-width: 500px; } .inactive-option { width: 70px; height: 70px; border-radius: 50%; background-size: cover; background-position: center; position: relative; cursor: pointer; transition: transform 0.3s ease; overflow: hidden; } .inactive-option::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); border-radius: 50%; } .inactive-option-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 1; } } /* Mobile specific adjustments */ @media screen and (max-width: 768px) { .option-item.active { height: 250px; border-radius: 20px; max-width: 400px; } .option-item.active .option-label { bottom: 20px; left: 20px; } .inactive-option { width: 60px; height: 60px; } .inactive-option-inner { width: 35px; height: 35px; font-size: 16px; } } /* Small mobile adjustments */ @media screen and (max-width: 480px) { .option-item.active { height: 220px; border-radius: 18px; } .option-item.active .option-label { bottom: 18px; left: 18px; } .option-main { font-size: 1.1rem; } .inactive-option { width: 50px; height: 50px; } .inactive-option-inner { width: 30px; height: 30px; font-size: 14px; } } ` return ( <>

About

Tags

Share

About

Tags

Share

More from nocheerleader

More Templates Like This